<template>
    <div class="car_box">
      <div class="car_list" v-for="item in msg">
        <div :class="{'left_car':true,'vivo':item.id=='vivo','mi':item.id=='mi','cz':item.id=='cz'}">
        </div>
        <div class="right_car">
          <div>
            <span @click="sub(item.id)">-</span>
            <input type="text" v-model="item.all_count">
            <span @click="sup(item.id)">+</span>
          </div>
        </div>
      </div>
      <p v-if="msg.length">总价:￥{{price}}</p>
      <p v-else>快去购物吧！</p>
    </div>
</template>

<script>
  export default {
    data () {
      return {
          msg:[],
          price:0
      }
    },
    created:function(){
      this.getmsg()
      this.getprice()
    },
    methods:{
      getmsg:function(){
        var arr=this.$store.state.all_msg
        this.msg=arr
      },
      getprice:function(){
        var that=this
        that.price=0
        this.msg.forEach(function(v){
              var one_price= v.price
              var one_count= v.all_count
          that.price+=one_count*one_price
        })
      },
      sub:function(e){
        var arr=this.$store.state.all_msg
        arr.forEach(function(v,i){
            if(v.id==e){
              if(arr[i].all_count>=1){
                arr[i].all_count--
              }
              if(arr[i].all_count==0){
                arr.splice(i,1)
              }

            }
       })
        this.getprice()
      },
      sup:function(e){
        var arr=this.$store.state.all_msg
        arr.forEach(function(v,i){
          if(v.id==e){
              arr[i].all_count++
          }
        })
        this.getprice()
      }

    }
  }
</script>

<style>
  .car_box{
    width: 100%;
    height: 1000px;
  }
  .car_box p{
    font-size: 20px;
    color: red;
    margin-top: 20px;
  }
  .car_list{
    width: 100%;
    height: 200px;
    /*background-color: yellow;*/
    padding: 10px;
    border-bottom: 1px solid #ccc;

  }
  .left_car{
    width: 40%;
    height: 100%;
    background-color: palegoldenrod;
    float: left;
  }
  .right_car{
    float: left;
    width: 60%;
    height: 100%;
    position: relative;
  }
  .right_car span{
    width: 30px;
    height: 30px;
    display: inline-block;
    border:1px solid #ccc;
    line-height: 30px;
  }
  .right_car div{
    position: absolute;
    width: 80%;
    height: 30px;
    top:50%;
    margin-top: -15px;
    left: 50%;
    margin-left: -40%;
  }
  .right_car input {
    width: 50px;
    text-align: center;
    vertical-align:baseline;
  }
  .cz{
    background: url("https://m.360buyimg.com/mobilecms/s357x357_jfs/t5527/223/1660932474/149818/343ed1d7/59130e4cNa6d07fe0.jpg!q50.jpg");
    background-size: 100% 100%;
  }
  .mi{
    background: url("https://m.360buyimg.com/mobilecms/s357x357_jfs/t5215/252/15502760/100416/cb06f1da/58f709adN45511018.jpg!q50.jpg");
    background-size: 100% 100%;
  }
  .vivo{
    background: url("https://m.360buyimg.com/mobilecms/s357x357_jfs/t5746/327/2330448657/111079/d035df9/592f8eeeN40695b07.jpg!q50.jpg");
    background-size: 100% 100%;
  }
</style>
